@(title: String) @main(title) {
<h1 style="text-align: center;cursor: pointer;">LODE - Villain</h1>
<div id="content">
	<div class="row-fluid" style="text-align:center;">
		<form class="form-search" onSubmit="return handleClick()">
			<input name="query" class="input-xlarge" type="text">
			<button class="btn" onclick="search()">Search</button>
		</form>
	</div>
	<div class="row-fluid">
		@for(target <- Target.values()){
		<div class="span4 well">
			<h2>@target.toString()</h2>
			<hr>
			<div id="@target.toString()"></div>
		</div>		  
		}
	</div>
</div>

<script type="text/javascript">

var sources = new Array('FREEBASE', 'YAGO', 'DBPEDIA');

function handleClick()
{
  return false;
}


var queryString;
function search(){
	queryString = $('input[name=query]').val(); 
	if (queryString.length < 2){
		alert("Your query is too short...");
		return;
	}
	var temp = "";
	for (var i = 0; i < sources.length; ++i){
		$("#"+sources[i]).html("loading...");
		$.get("/search", {query: queryString, source : sources[i] },
			function(data) {
				if (data['query'] == queryString){
					$("#"+data['source']).html(data['content']);
					$("li[data-src="+ data['source'] +"]").click(function(event){
						var name = $(this).html();
						var id = $(this).attr('data-id');
						var res = $(this).attr('data-src'); //$(this).parent().parent().parent().children().first().text();
						$('a').tooltip('hide');
						show(name, id, res);
					});
					$('li').css( 'cursor', 'pointer' );
					$('a').tooltip();
				}
			}
		);
	}
}

function show(name, id, source){
	queryString = "";
	$.get("/show", {id: id, source : source },
			function(data) {
				$('#content').html(data);
			}
	);
}

$(document).ready(function(){
	$('h1').click(function () {
		  window.location = "/";
    });
});	
</script>

}
